<template>
	<view class="card">
		<view class="tx flex" @click="setinfo">
			<divImg class="img" :src="data.avatar" ></divImg>
			<view class="chaos spaceBetween">
				<view class="name flex" >
					<view class="">
						{{ !data.nickname || data.nickname=='' ?'点击编辑':data.nickname }}
					</view>
					<image class="edit"  src="/static/images/my/edit.png" mode=""></image>
				</view>
				<view class="ordinary" v-if="!data.vip || data.vip == 0">普通用户</view>
				<view class="vip" v-if="data.vip">VIP会员</view>
			</view>
		</view>
		<view class="vipBox" @click="vipBox">
			<image class="bg" src="/static/images/my/vipbg.png" mode=""></image>
			<image class="vippng" src="/static/images/my/vip.png" mode=""></image>
			<view class="textBox spaceEvenly">
				<view class="title">VIP会员</view>
				<view class="date">
					
					<text v-if="data.vip">到期时间：{{ new Date(data.vip_expiration_time * 1000).toLocaleString() }}</text>
					<text v-else>开通会员</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'headercard',
		props: {
			data: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {};
		},
		methods: {
			vipBox() {
				if (this.data.vip ) {
					return;
				}
				uni.navigateTo({
					url: '/pages/index/vip/vip',
				});
			},
			setinfo() {
				uni.setStorageSync('userInfoData', this.data);
				uni.navigateTo({
					url: '/pages/my/setinfo/setinfo',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.card {
		width: 100%;
		overflow: hidden;
		background-color: #fff;
		padding-top: 80rpx;
		.tx {
			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-top: 30rpx;
				margin-left: 30rpx;
			}
			.chaos {
				// margin-left: 30rpx;
				// margin-top: 30rpx;
				height: 120rpx;
				flex-direction: column;
				margin: $margin-width $margin-width 40rpx;
				.name {
					color: #000000;
					font-size: $uni-font-size-25;
					align-items: center;
					.edit {
						width: 24rpx;
						height: 24rpx;
						margin-left: $submargin-width;
					}
				}
				.ordinary {
					// width: 100rpx;
					width: fit-content;

					margin: 0;
					height: 33rpx;
					background: #1fc28b;
					border-radius: 17rpx;
					color: #fff;
					line-height: 33rpx;
					text-align: center;
					font-size: $uni-font-size-10;
					padding: 0 10rpx;
				}
				.vip {
					margin: 0;
					padding: 0 10rpx;
					// width: 95rpx;
					width: fit-content;

					height: 33rpx;
					line-height: 33rpx;
					border-radius: 17rpx;
					background: #f4d39d;
					border-radius: 17rpx;
					color: #522e11;
					text-align: center;
					font-size: $uni-font-size-10;
				}
			}
		}
		.vipBox {
			width: 690rpx;
			height: 100rpx;
			margin: 0 auto;
			position: relative;
			.bg {
				z-index: 1;
			}
			.vippng {
				position: absolute;
				top: 22rpx;
				left: 30rpx;
				z-index: 2;
				width: 70rpx;
				height: 57rpx;
			}
			.textBox {
				height: 100%;
				flex-direction: column;
				position: absolute;
				z-index: 2;
				top: 0;
				left: 130rpx;
				.title {
					font-size: $uni-font-size-14;
					font-weight: bold;
					color: #522e11;
				}
				.date {
					font-size: $uni-font-size-10;
					color: #522e11;
				}
			}
		}
	}
</style>
